<template>
	<view class="evaluate-list-container">
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<!-- #ifdef MP-WEIXIN -->
		<qmy-custom-navbar :title="'查看评价'"></qmy-custom-navbar>
		<!-- #endif -->

		<!-- 评价筛选区域 -->
		<view class="filter-section" :style="{paddingTop: menuObject.top + menuObject.height + 8 + 'px'}">
			<v-tabs ref="tabs" field="text" :zIndex="1" :scroll="false" bgColor="#ffffff00" pillsColor="#ffffff00"
				fontSize="28rpx" pillsStyle="box" activeFontSize="28rpx" lineHeight="4rpx" :lineScale="0.2"
				activeColor="linear-gradient(to right, #14cc60, #14cc60)" paddingItem="0rpx 40rpx"
				color="linear-gradient(to right, #616161, #616161)" lineColor="#14cc60" v-model="currentTab"
				:tabs="filterTabs" @change="changeFilter"></v-tabs>
		</view>

		<!-- 评价列表区域 -->
		<view class="evaluate-container">
			<template v-if="evaluateList.length > 0">
				<view class="evaluate-item" v-for="(item, index) in evaluateList" :key="index">
					<!-- 用户信息 -->
					<view class="user-info">
						<view class="avatar-container">
							<image class="avatar" :src="item.user_avatar || defaultAvatar" mode="aspectFill"></image>
						</view>
						<view class="user-detail">
							<view class="user-name">{{item.user_name || '匿名用户'}}</view>
							<view class="evaluate-time">{{formatDate(item.create_date)}}</view>
						</view>
						<view class="rating-display">
							<text v-for="star in 5" :key="star" class="iconfont"
								:class="star+1 <= item.rating ? 'ic-aixin1 col-ff4' : 'ic-aixin col-87'"></text>
						</view>
					</view>

					<!-- 商品信息 -->
					<view class="goods-info">
						<image class="goods-image" :src="item.goods_snapshot.image" mode="aspectFill"></image>
						<view class="goods-detail">
							<view class="goods-name text-element-2">{{item.goods_snapshot.name}}</view>
							<view class="goods-specs" v-if="item.specs && item.specs.length > 0">
								<text class="spec-badge" v-for="(spec, sindex) in item.specs"
									:key="sindex">{{spec}}</text>
							</view>
						</view>
					</view>

					<!-- 评价内容 -->
					<view class="evaluate-content">
						<view class="evaluate-text">{{item.content}}</view>
						<!-- 评价图片 -->
						<view class="evaluate-images" v-if="item.images && item.images.length > 0">
							<view class="image-item" v-for="(image, imgIndex) in item.images" :key="imgIndex"
								@click="previewImages(item.images, imgIndex)">
								<image :src="image.url" mode="aspectFill"></image>
							</view>
						</view>
						<!-- 评价标签 -->
						<view class="evaluate-tags" v-if="item.tags && item.tags.length > 0">
							<view class="tag-item" v-for="(tag, tindex) in item.tags" :key="tindex">{{tag}}</view>
						</view>
					</view>

					<!-- 商家回复 -->
					<view class="shop-reply" v-if="item.reply_content">
						<view class="reply-title">商家回复：</view>
						<view class="reply-content">{{item.reply_content}}</view>
					</view>
				</view>
			</template>
			<qmy-logo :loading="load" v-if="evaluateList.length && dataLoaded"></qmy-logo>

			<!-- 空状态 -->
			<view class="empty-state" v-if="evaluateList.length === 0 && dataLoaded">
				<image class="empty-image"
					src="https://gd-hbimg.huaban.com/7155c543aa4e1dc4a7bb6413a85ed1abe588fb4a1537-Tu5B7V_fw1200webp"
					mode="aspectFit"></image>
				<view class="empty-text">暂无评价数据</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuObject: uni.getMenuButtonBoundingClientRect(),
				dataLoaded: false,
				filterTabs: [{
						text: '全部',
						value: 'all'
					},
					{
						text: '好评',
						value: 'good'
					},
					{
						text: '中评',
						value: 'medium'
					},
					{
						text: '差评',
						value: 'bad'
					},
					{
						text: '有图',
						value: 'images'
					}
				],
				currentFilter: 'all',
				evaluateList: [],
				goodsId: '',
				defaultAvatar: 'https://mp-22f314fc-fd0f-43b9-886e-ac79fe32303c.cdn.bspapp.com/image/default-avatar.jpg',
				page: 1,
				pageSize: 10,
				hasMore: true,
				totalCount: 0,
				currentTab: 0,
				load: false, // 是否加载中
			};
		},
		onLoad(options) {
			if (options.id) {
				this.goodsId = options.id;
				this.loadEvaluateData();
			} else {
				this.$Toast('缺少商品ID参数');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 加载评价数据
			loadEvaluateData(reset = true) {
				if (reset) {
					this.page = 1;
					this.evaluateList = [];
				}

				// 构建筛选条件
				const filter = {};

				// 添加商品ID筛选
				filter.goods_id = this.goodsId;

				// 根据当前筛选条件添加筛选参数
				switch (this.currentFilter) {
					case 'good':
						filter.rating = {
							$gte: 4
						}; // 好评：4-5星
						break;
					case 'medium':
						filter.rating = 3; // 中评：3星
						break;
					case 'bad':
						filter.rating = {
							$lte: 2
						}; // 差评：1-2星
						break;
					case 'images':
						filter.has_images = true; // 有图
						break;
				}

				this.load = true;
				// 调用云函数获取评价数据
				this.$Route('get-public-data', !this.dataLoaded).getGoodsEvaluateList({
					filter,
					page: this.page,
					pageSize: this.pageSize
				}).then(res => {
					const {
						data,
						total
					} = res;

					// 处理评价数据
					if (reset) {
						this.evaluateList = data;
					} else {
						this.evaluateList = [...this.evaluateList, ...data];
					}

					this.totalCount = total;
					this.hasMore = this.evaluateList.length < total;
				}).catch(err => {
					console.error('遇到错误:', err);
					let {
						code,
						msg
					} = this.$parseError(err);
					this.$Toast(msg);
				}).finally(() => {
					this.load = false;
					this.dataLoaded = true;
					// 停止下拉刷新
					uni.stopPullDownRefresh();
				});
			},

			// 切换筛选条件
			changeFilter(filter) {
				if (this.currentFilter === this.filterTabs[filter].value) return;
				this.currentFilter = this.filterTabs[filter].value
				// 重置并重新加载数据
				this.loadEvaluateData();
			},

			// 加载更多评价
			loadMore() {
				if (!this.hasMore) {
					this.$Toast('没有更多数据了');
					return;
				}
				this.page++;
				this.loadEvaluateData(false);
			},

			// 格式化日期
			formatDate(timestamp) {
				if (!timestamp) return '';

				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');

				return `${year}-${month}-${day}`;
			},

			// 预览图片
			previewImages(images, index) {
				const urls = images.map(img => img.url);
				uni.previewImage({
					urls,
					current: index
				});
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadEvaluateData();
		},
		// 上拉加载更多
		onReachBottom() {
			this.loadMore();
		}
	}
</script>

<style lang="scss">
	.evaluate-list-container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.filter-section {
		background-color: #ffffff;
		padding-bottom: 20rpx;
		position: sticky;
		top: 0;
		z-index: 1;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

	}

	.evaluate-container {
		padding: 20rpx 30rpx 40rpx;
	}

	.evaluate-item {
		background-color: #ffffff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			.avatar-container {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				overflow: hidden;
				background-color: #f0f0f0;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}

			.user-detail {
				flex: 1;
				margin-left: 20rpx;

				.user-name {
					font-size: 28rpx;
					color: #333;
					font-weight: 500;
				}

				.evaluate-time {
					font-size: 24rpx;
					color: #999;
					margin-top: 6rpx;
				}
			}

			.rating-display {
				.iconfont {
					font-size: 30rpx;
					margin-left: 2rpx;
				}

				.col-ff4 {
					color: #FF3B30;
				}

				.col-87 {
					color: #CCCCCC;
				}
			}
		}

		.goods-info {
			display: flex;
			align-items: center;
			background-color: #f9f9f9;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-bottom: 20rpx;

			.goods-image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 10rpx;
				flex-shrink: 0;
			}

			.goods-detail {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
				margin-left: 20rpx;
				height: 120rpx;

				.goods-name {
					font-size: 26rpx;
					color: #333;
				}

				.goods-specs {
					display: flex;
					flex-wrap: wrap;

					.spec-badge {
						background-color: #f0f0f0;
						color: #888;
						font-size: 22rpx;
						padding: 4rpx 12rpx;
						border-radius: 8rpx;
					}
				}
			}

			.goods-arrow {
				flex-shrink: 0;
				margin-left: 10rpx;

				.iconfont {
					font-size: 32rpx;
				}
			}
		}

		.evaluate-content {
			.evaluate-text {
				font-size: 28rpx;
				color: #333;
				line-height: 1.6;
				margin-bottom: 16rpx;
			}

			.evaluate-images {
				display: flex;
				flex-wrap: wrap;
				margin-bottom: 16rpx;

				.image-item {
					width: 180rpx;
					height: 180rpx;
					margin-right: 15rpx;
					margin-bottom: 15rpx;
					border-radius: 10rpx;
					overflow: hidden;
					background-color: #f0f0f0;

					image {
						width: 100%;
						height: 100%;
						object-fit: cover;
					}

					&:nth-child(3n) {
						margin-right: 0;
					}
				}
			}

			.evaluate-tags {
				display: flex;
				flex-wrap: wrap;

				.tag-item {
					background-color: rgba(20, 204, 96, 0.1);
					color: #14cc60;
					font-size: 24rpx;
					padding: 8rpx 20rpx;
					border-radius: 100rpx;
					margin-right: 16rpx;
					margin-bottom: 16rpx;
				}
			}
		}

		.shop-reply {
			background-color: #f9f9f9;
			border-radius: 12rpx;
			padding: 20rpx;
			margin-top: 20rpx;

			.reply-title {
				font-size: 26rpx;
				color: #333;
				font-weight: 500;
				margin-bottom: 10rpx;
			}

			.reply-content {
				font-size: 26rpx;
				color: #666;
				line-height: 1.5;
			}
		}
	}

	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 50%;
		transform: translate(-50%, -50%);
		left: 50%;

		.empty-image {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}

		.empty-text {
			font-size: 28rpx;
			color: #999;
		}
	}
</style>